<template>
  <view>
    <scroll-view class="sidebar" scroll-y="true">
      <!--    这个是官方的最新写法，后面那个是参考的写法-->
      <!--    <uni-data-menu :localdata="localMenus" :unique-opened="true" :active="activeUrl" active-text-color="#409eff" @select=""></uni-data-menu>-->
          <uni-data-menu
              :value="activeUrl"
              :staticMenu="localMenus"
              active-text-color="#409eff"
              @select="select">
          </uni-data-menu>
    </scroll-view>
  </view>
</template>

<script>

import {mapActions, mapState} from "vuex";
import uniWrapper from "../../utils/store/uniWrapper";
import language from "../../api/language";

export default {
  name: "segSidebar",
  computed: {
    ...mapState("app", ['nowLanguage']),
    ...mapState('user', ['userHasLogin'])
  },
  watch: {
    nowLanguage(newVal, oldVal){
      this.changeMenuLang()
    },
    userHasLogin(newVal, oldVal){
      // 用户没登录跳转到登录的状态
      if(newVal === true){
        this.routeExits()
        this.jump()
      }
    }
  },
  mounted() {
    // 如果用于已经有登录状态
    if(this.userHasLogin){
      this.routeExits()
      this.jump()
    }
    this.changeMenuLang()
  },
  data() {
    return {
      activeUrl: '/',
      localMenus: [{
        menu_id: "demo",
        text: '功能菜单',
        icon: 'star-filled',
        value: "",
        children: [{
          menu_id: "icons",
          text: '角膜神经',
          icon: 'person-filled',
          value: '/',
        }
          //测试页面，开发的时候开启
          ,
          {
          menu_id: "table",
          text: '组建测试页面',
          icon: 'star-filled',
          value: '/pages/fixwin/fixwin',
          }
        ]
      }]
    }
  },
  methods: {
    ...mapActions({
      setRouteValue: 'route/setRouteValue'
    }),
    changeMenuLang(){
      this.localMenus[0].text = this.getTranslate(0)
      this.localMenus[0].children[0].text = this.getTranslate(1)
      // this.localMenus[0].children[1].text = this.getTranslate(2)
    },
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segSidebar)
      if (posIndex === 0){
        return langDict.demo
      }else if(posIndex === 1){
        return langDict.mainInterface
      }else if(posIndex === 2){
        return langDict.testPage
      }
    },
    routeExits(){
      // TODO 只能判断二级
      let value = uniWrapper.getUniCache('routeValue')
      if (value){
        // 判断是否存在
        let find = false
        for (let i = 0; i < this.localMenus.length; i++){
          let item = this.localMenus[i]
          if (item.children){
            for (let j = 0; j < item.children.length; j++){
              let itemChild = item.children[j]
              if (itemChild.value === value){
                this.activeUrl = value
                find = true
                break
              }
            }
          }
          if (find){
            break
          }
          if (item.value === value){
            this.activeUrl = value
            break
          }
        }
      }
    },
    select(e, routes){
      // debugger
      let url = e.value
      if (!url){
        url = this.activeUrl
      }else{
        this.activeUrl = url
      }
      this.setRouteValue(this.activeUrl)
      this.jump()
    },
    jump(){
      uni.redirectTo({
        url: this.activeUrl,
        fail: () => {
          uni.showModal({
            title: '提示',
            content: '页面 ' + url + ' 跳转失败',
            showCancel: false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .sidebar {
    position: fixed;
    // top: var(--top-window-height); // useless
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid darken($left-window-bg-color, 8%);
    background-color: $left-window-bg-color;
    padding-bottom: 10px;
  }

  .sidebar ::-webkit-scrollbar {
    display: none;
    // scrollbar-width: thin;
  }

  .title {
    margin-left: 5px;
  }
</style>
